<template>
  <div>
    <el-row>
      <el-col :span="20"
        ><div class="grid-content bg-purple-dark">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item @click="tohome">首页</el-menu-item>

            <el-menu-item>消息中心</el-menu-item>
            <el-menu-item @click="toproduct">产品信息</el-menu-item>
            <el-menu-item>公司简介</el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple-dark">
          <el-header style="text-align: right; font-size: 12px">
            <img
              class="imgcss"
              src="../assets/logo.png"
              width="50px"
              height="40px"
            />
            <el-dropdown style="color: bisque">
              <i class="el-icon-s-home" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="el-icon-user">
                  <span @click="houtai">后台中心</span></el-dropdown-item
                >
                <el-dropdown-item>切换用户</el-dropdown-item>
                <el-dropdown-item class="el-icon-user">
                  <span @click="staff">员工后台管理</span></el-dropdown-item
                >

                <el-dropdown-item>退 出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>{{this.$route.query.userName}}{{this.$route.query.empName}} </span>
          </el-header>
        </div></el-col
      >
    </el-row>
    <!-- <main-menu></main-menu> -->
    <router-view></router-view>
    <home v-show="isshowhome"></home>
    <greenroom v-show="isshowgreemroom"></greenroom>
    <product-info v-show="isshowproduct"></product-info>
    <staff v-show="staffshow"></staff>
    <router-view />
  </div>
</template>

<script>
import Greenroom from "./Greenroom.vue";
import Home from "./Home.vue";
import ProductInfo from "./ProductInfo.vue";
import Staff from "./Staff.vue";
export default {
  components: { Home, Greenroom, ProductInfo, Staff },
  data() {
    return {
      isshowhome: true,
      isshowgreemroom: false,
      isshowproduct: false,
      staffshow: false,
    };
  },
  methods: {
    staff: function () {
      this.isshowhome = false;
      this.isshowgreemroom = false;
      this.isshowproduct = false;
      this.staffshow = true;
    },
    houtai: function () {
      this.isshowhome = false;
      this.isshowgreemroom = true;
      this.isshowproduct = false;
      this.staffshow = false;
      // this.$router.push("/greemroom");
    },
    tohome: function () {
      this.isshowhome = true;
      this.isshowgreemroom = false;
      this.isshowproduct = false;
      this.staffshow = false;
    },
    toproduct: function () {
      this.isshowhome = false;
      this.isshowgreemroom = false;
      this.isshowproduct = true;
      this.staffshow = false;
    },
  },
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #116de5;
  /* color: rgb(244, 236, 236); */
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #b3cfee;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: rgb(78, 59, 59);
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.imgcss {
  margin-top: 12px;
}
</style>